<template>
    <div class="outapplyinfo-box">
        <div class="button-box-applyInfo">
            <template v-if="type!=='1'&&type!=='4'">
                <el-button type="success" @click="openAdd" icon="el-icon-plus" size="small"
                >选择商品
                </el-button>
            </template>
        </div>

        <br>

        <div class="selectedGoods-box">

            <el-table height="250" border :data="selectedGoodList" :stripe="true"
                      style="width: 95%">

                <el-table-column type="index" width="50" label="序号"></el-table-column>

                <el-table-column prop="goodImei" label="商品串号"></el-table-column>

                <el-table-column prop="goodName" label="商品名称"></el-table-column>

                <el-table-column prop="goodType" label="商品类型"></el-table-column>

                <el-table-column prop="goodBrand" label="商品品牌"></el-table-column>

                <el-table-column prop="goodModel" label="商品型号"></el-table-column>

                <el-table-column prop="goodColor" label="商品颜色"></el-table-column>

                <el-table-column prop="goodProvider" label="商品供应商"></el-table-column>

                <el-table-column prop="goodMessage" label="商品追踪信息"></el-table-column>

                <el-table-column label="操作" v-if="type!=='4'">
                    <template #default="slotProps">
                        <el-button type="danger" round size="mini" @click="delFromList(slotProps.row)"
                        :disabled="type==='1'">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <br>

        <div>
            <el-card class="box-card" style="width: 95%">
                <el-form label-width="80px">

                    <el-form-item label="返厂地点">
                        <el-input placeholder="返厂地点" v-model="refacLocation" style="width: 400px"
                                  size="small" :disabled="type==='1'||type==='4'"></el-input>
                    </el-form-item>

                    <el-form-item label="返厂原因">
                        <el-input type="textarea" v-model="refacReason" style="width: 400px"
                                  size="small" :disabled="type==='1'||type==='4'"></el-input>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="comments" style="width: 400px"
                                  size="small" :disabled="type==='1'||type==='4'"></el-input>
                    </el-form-item>

                </el-form>
            </el-card>
        </div>

        <br>

        <div class="approve-info" style="width: 95%">
            <el-card class="box-card" v-if="type==='1'||type==='4'">
                <template #header>
                    <div class="card-header">
                        <span>审核信息</span>
                    </div>
                </template>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核人：&emsp;&emsp;</span>
                    <span class="approve">{{approver}}&emsp;&emsp;</span>
                </el-card>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核日期：&emsp;&emsp;</span>
                    <span class="approve" :formatter="formatter">{{formatApproveTime}}&emsp;&emsp;</span>
                </el-card>
                <el-card class="box-card-in" style="width: 33%">
                    <span class="approve">审核状态：&emsp;&emsp;</span>
                    <span class="approve" v-if="approveStatus===0">审核未通过</span>
                    <span class="approve" v-if="approveStatus===1">未审核</span>
                    <span class="approve" v-if="approveStatus===2">已通过</span>
                </el-card>
                <el-card style="width: 99.2%">
                    <template #header>
                        <div class="card-header">
                            <span class="approve">审核意见</span>
                        </div>
                    </template>
                    <span class="approve">{{approverComments}}</span>
                </el-card>
            </el-card>
        </div>

        <br>

        <div class="applyInfo-buttons">
            <el-button type="success" icon="el-icon-plus" v-if="type==='2'" @click="saveNewApply">保存</el-button>
            <el-button type="warning" icon="el-icon-edit" v-if="type==='0'" @click="alterApply">修改</el-button>
            <el-button type="primary" icon="el-icon-back" @click="returnMan" v-if="type!=='4'">返回</el-button>
        </div>


        <div class="dialog-box">
            <el-dialog title="选择残次品库中商品" :visible.sync="dialogTableVisible" style="width: 100%">
                <el-form :inline="true" class="demo-form-inline" size="mini">
                    <el-form-item label="商品名称">
                        <el-input placeholder="商品名称" v-model="search.goodName"></el-input>
                    </el-form-item>
                    <el-form-item label="商品串号">
                        <el-input placeholder="商品串号" v-model="search.goodImei"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌">
                        <el-input placeholder="商品品牌" v-model="search.goodBrand"></el-input>
                    </el-form-item>
                    <el-form-item label="商品型号">
                        <el-input placeholder="商品型号" v-model="search.goodModel"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="findPage" icon="el-icon-search">搜索</el-button>
                        <el-button type="warning" @click="resetForm" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="goodList" :stripe="true" style="width: 100%" border ref="multipleTable"
                          @selection-change="handleSelectionChange" row-key="id">

                    <el-table-column type="index" width="50" label="序号"></el-table-column>

                    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>

                    <el-table-column prop="goodImei" label="商品串号"></el-table-column>

                    <el-table-column prop="goodName" label="商品名称"></el-table-column>

                    <el-table-column prop="goodType" label="商品类型"></el-table-column>

                    <el-table-column prop="goodBrand" label="商品品牌"></el-table-column>

                    <el-table-column prop="goodModel" label="商品型号"></el-table-column>

                    <el-table-column prop="goodColor" label="商品颜色"></el-table-column>

                    <el-table-column prop="goodStatus" label="商品状态">
                        <template #default="slotProps">
                            <span v-if="slotProps.row.goodStatus===0">在库中</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="goodProvider" label="商品供应商"></el-table-column>

                    <el-table-column prop="goodMessage" label="商品追踪信息"></el-table-column>

                </el-table>

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
                <br>
                <el-button type="success" @click="dialogTableVisible = false" icon="el-icon-close" size="small"
                >关闭
                </el-button>

            </el-dialog>
        </div>
    </div>
</template>

<script>

    import outApplyInfo from './index'

    export default outApplyInfo;
</script>

<style scoped src="./index.scss" lang="scss">
</style>